package com.home.wechat_.ui

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.home.wechat_.ext.unReadHint
import com.home.wechat_.ui.data.Chat
import com.home.wechat_.ui.data.Module
import com.home.wechat_.ui.theme.WeTheme

/**
 *Author: YFS(893145181@qq.com)
 *Time:2021/12/1 14:19
 */
@Composable
fun ChatList(chats: List<Chat>) {
    val viewModel :WeViewModel  = viewModel()
    Column(
        modifier = Modifier
            .background(WeTheme.colors.background)
            .fillMaxSize()
    ) {
        WeTopBar("首页")

        LazyColumn(Modifier.background(WeTheme.colors.listItem)) {
            itemsIndexed(chats) { index, chat ->
                ChatListItem(chat)
                if (index < chats.size - 1) {
                    Divider(
                        startIndent = 68.dp,
                        color = WeTheme.colors.chatListDivider,
                        thickness = 0.8f.dp
                    )
                }
            }
        }
    }


}

@Composable
private fun ChatListItem(chat: Chat) {
    val viewModel:WeViewModel = viewModel()
    Row(
        Modifier
            .fillMaxWidth()
            .clickable(onClick = {
                viewModel.startChat(chat)
            })
    ) {
        Image(
            painterResource(chat.friend.avatar), "avatar", Modifier
                .padding(12.dp, 8.dp, 8.dp, 8.dp)
                .size(48.dp)
                .unReadHint(chat.msgs.last().read, WeTheme.colors.badge)
                .clip(RoundedCornerShape(4.dp))
        )
        Column(
            Modifier
                .weight(1f)
                .align(Alignment.CenterVertically)
        ) {
            Text(chat.friend.name, fontSize = 17.sp, color = WeTheme.colors.textPrimary)
            Text(chat.msgs.last().text, fontSize = 14.sp, color = WeTheme.colors.textSecondary)
        }
        Text(
            "13:48",
            Modifier.padding(8.dp, 8.dp, 12.dp, 8.dp),
            fontSize = 11.sp, color = WeTheme.colors.textSecondary
        )
    }
}


